<template>
  <div class="campus-card-recharge">
    <el-card>
      <div class="section-title">校园卡充值</div>
      <!-- 余额显示 -->
      <!-- 充值档位选择，充值按钮 -->
      <!-- TODO: 绑定数据和事件 -->
    </el-card>
    <el-card class="history-section" style="margin-top: 24px;">
      <div class="section-title">充值历史记录</div>
      <!-- TODO: 折叠面板，显示充值明细 -->
    </el-card>
  </div>
</template>

<script setup>
// TODO: 引入所需组件、API、状态管理等
</script>

<style scoped>
.campus-card-recharge {
  padding: 24px;
}
.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
}
.history-section {
  margin-top: 24px;
}
</style> 